<template>

    <a-space  style="margin-left: 25px;margin-top: 20px;">
        <a-typography-text>智能匹配</a-typography-text>

        <a-switch v-model="switchValue" :beforeChange="handleSwitchChange">
            <template #checked-icon >
                <icon-heart />

            </template>
            <template #unchecked-icon>
                <icon-close/>
            </template>
        </a-switch>

    </a-space>
    <div style="margin-left: 25px;margin-top: 20px;"> ( Tips: 开启智能匹配模式需要先发布自己的兴趣标签，系统最多为您匹配6个兴趣相同的用户 ) </div>

    <div
            :style="{
      display: 'flex',
      width: '100%',
      boxSizing: 'border-box',
      padding: '20px', flexWrap: 'wrap' }"
    >
       <!-- 循环生成卡片 -->
       <a-card :style="{ width: '300px',margin: '5px 40px 40px 5px ',boxShadow: '#eee 15px 15px 5px'}"  hoverable  class="card-demo" v-for="i in cardList">
           <template #actions>
               <!--<span class="icon-hover">
                   <IconThumbUp/> {{12}}
               </span>-->

               <!--<span class="icon-hover"> <IconShareInternal /> </span>
               <span class="icon-hover"> <IconMore /> </span>-->
               <span class="icon-hover" v-if="currentUser?.userRole===1||currentUser?.id==i?.userId "
                        @click="deleteInterest(i.id)"
               ><icon-delete /> </span>
           </template>
           <!-- 卡片封面 -->
           <template #cover>
               <div
                       :style="{height: '150px',overflow: 'hidden'}"
               >
                   <img
                           :style="{ width: '100%', transform: 'translateY(-20px)' }" alt="dessert"
                            :src="i.imageUrl"
                   />
               </div>
           </template>
           <!-- 卡片元数据 -->
           <a-card-meta >

           <template #description>
               <div :style="{wordWrap: 'break-word' }">
                   {{i.description}}
               </div>
               <a-space style="margin-top: 3px" v-for="t in i.tags">
                   <a-tag checkable color="arcoblue" style="margin-right: 5px">{{t}}</a-tag>

               </a-space>
           </template>


               <template #avatar>
                   <div
                           :style="{ display: 'flex', alignItems: 'center',color: '#1D2129' }"
                   >
                       <a-avatar :size="24" :style="{ marginRight: '8px' }">
                           <img alt="avatar" :src="i.userAvatar" />
                       </a-avatar>
                       <a-typography-text>{{i.username}}</a-typography-text>
                   </div>
               </template>
           </a-card-meta>
       </a-card>

    </div>


    <div class="menu-demo">

        <a-trigger
                :trigger="['click', 'hover']"
                clickToClose
                position="top"
                v-model:popupVisible="popupVisible2"
        >
            <div :class="`button-trigger ${false ? 'button-trigger-active' : ''}`">
                <IconClose v-if="false" />
                <IconMessage v-else />
            </div>
            <template #content>
                <a-menu
                        :style="{ marginBottom: '-4px' }"
                        mode="popButton"
                        :tooltipProps="{ position: 'left' }"
                        showCollapseButton
                >
                    <router-link to="/find">
                    <a-menu-item key="1">
                        <template #icon><icon-pen-fill /></template>
                        找伙伴
                    </a-menu-item>
                    </router-link>
                </a-menu>
            </template>
        </a-trigger>
    </div>

</template>
<script setup>
  import {onMounted, watchEffect} from "@vue/runtime-core";
  import {getCurrentUser} from "@/services/user";
  import {ref} from "@vue/reactivity";
  import message from "@arco-design/web-vue/es/message";
  import axios from "axios";
  import myAxios from "@/plugins/myAxios";
  import {watch} from "vue";

  const currentUser = ref({})
  const cardList=ref([])
  const newsList=ref([])
  onMounted(async () => {
    currentUser.value = await getCurrentUser();
      getList()

  })

  watch(() => currentUser, (newValue, oldValue) => {
          if (newValue?.value) {
              currentUser.value = newValue.value

          }
      }, {immediate: true, deep: true}
  )
  //获取所有的兴趣卡片
  const getList=async ()=>{
      const res = await myAxios.get("/friends/list")
      if (res?.code === 0) {
          cardList.value = res.data;
      } else {
          message.error('请求失败！')
      }
  }

  const switchValue = ref(false);
  const handleSwitchChange =async (newValue) => {

      if (newValue){

          await new Promise((resolve) => setTimeout(resolve, 1000))
          //获取推荐的兴趣卡片
          const res=await myAxios.get("/friends/recommend")
          if (res?.code === 0) {
              cardList.value = res.data
              message.success("已为你开启智能匹配模式")
              return true

          } else {
              message.error(res.description?`${res.description}`:'开启智能匹配模式失败！')
              return false
          }

      }else {
          getList()
      }

  };

  const deleteInterest=async (id)=>{
      console.log(id)
      const res = await myAxios.post('/friends/delete',{
          id
      });
      //后端返回的code是0,则获取到了用户的信息，然后返回
      if (res.code === 0) {

          message.success("删除成功！")
          location.reload()
      } else {
          message.error('删除失败！' + res.description ? `${res.description}` : '')

      }


  }




</script>
<style scoped>
  .news{
    width: 250px;
    display: flex;
  }

  .card-demo {
      width: 360px;
      margin-left: 24px;
      transition-property: all;
  }
  .card-demo:hover {
      transform: translateY(-1px);
  }

  .icon-hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      transition: all 0.1s;
  }
  .icon-hover:hover {
      background-color: rgb(var(--gray-2));
  }


  .menu-demo {
      box-sizing: border-box;

      display: flex;
      background-color: var(--color-fill-2);
      position: absolute;
      bottom: 0px;
      right: 0px;
  }
  .button-trigger {
      position: absolute;
      bottom: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      color: var(--color-white);
      font-size: 14px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.1s;
  }
  /* button left */
  .button-trigger:nth-child(1) {
      left: -45px;
      background-color: var(--color-neutral-5);
  }
  .button-trigger:nth-child(1).button-trigger-active {
      background-color: var(--color-neutral-4);
  }
  /* button right */
  .button-trigger:nth-child(2) {
      left: 372px;
      background-color: rgb(var(--arcoblue-6));
  }
  .button-trigger:nth-child(3).button-trigger-active {
      background-color: var(--color-primary-light-4);
  }
</style>
